import React, { useReducer, useState, useEffect } from 'react'
import Header from '../../components/Header'
import './Mine.less'
import p from '../../assets/img/4.jpeg'
//引入仓库
import { initState, reducer, actions } from '../Login/user'
import { Toast } from 'antd-mobile'
import { reqBanner } from '../../http/api'
import MineBanner from './MineBanner/MineBanner'

export default function Mine(props) {
    //1.1 轮播图初始化
    const [banner, setBanner] = useState([])
    const [state, dispatch] = useReducer(reducer, initState)

    // 1.2一进页面就请数据
    useEffect(async () => {
        let res = await reqBanner()
        if (res.data.code === 200) {
            //   1.3 修改赋值
            setBanner(res.data.list ? res.data.list : [])
        }
    }, [])
    // console.log(state);
    // 点击了退出登录
    const outLogin = () => {
        dispatch(actions.changeInfo({}));
        // 提示
        Toast.info('您已退出登录')
        // 跳到登录页面
        props.history.replace('/login')
    }
    return (
        <div className="mine">
            {/* 头部组件 */}
            <Header title="个人中心" back></Header>
            <div className="main">
                <div className="inner">
                    <div className="ava">
                        <img src={p} alt="" />
                        <div className="nickname">{state.info.nickname}</div>
                        <div className="outLogin" onClick={() => outLogin()}>退出登录</div>
                    </div>
                    <div className="ava_nav">
                        <ul>
                            <li>我的收藏</li>
                            <li>浏览记录</li>
                            <li>我的红包</li>
                            <li style={{fontSize:'large'}} onClick={() => props.history.push('/coupon')}>优惠券</li>
                        </ul>
                    </div>
                    <div className="my_order">
                        <p className="order">我的订单</p>
                        <ul>
                            <li>待付款</li>
                            <li>待收货</li>
                            <li>待评价</li>
                            <li>售后/退款</li>
                        </ul>
                    </div>
                </div>
            </div>
            {/* 轮播图 1.4 传个子组件 */}
            {
                banner.length > 0 ? <MineBanner bannerShow={banner}></MineBanner> : null
            }

        </div>
    )
}
